<template>
	<view class="page-login">
		<u-overlay :show="showLogin" @click="closeModal" class="flex-center">
			<view class="login-block">
				<image mode="widthFix" @tap.stop style="width: 400px;height: 400px;" :src="viewMode=='day'?loginBackground:loginBackgroundNight"></image>
				<view class="login-title flex-center" :style="viewMode=='day'?'color: #333;':'color: #efefef;'">
					{{loginTitle}}
				</view>
				<view class="login-tip flex-center" :style="viewMode=='day'?'color: #333;':'color: #efefef;'">
					<text>{{loginTips}}</text>
				</view>
				<view class="operate-block flex-center">
					<view class="login-btn flex-center" @click="fastLoginFn" :style="viewMode=='day'?'background-color: #3586ff;color: #fff;':'background-color: #333;color: #FFC200;'">立即登录</view>
				</view>
				
			</view>
		</u-overlay>
	</view>
</template>

<script>
	import {
		getUserInfo
	} from '@/static/js/common/api.js'
	export default {
		name: "userlogin",
		props: {
			viewMode:{
				type:String,
				default:"night"
			},
			_userinfo: {
				default: {}
			},
			showLoginModal: {
				type: Boolean,
				default: false
			},
			loginBackground:{
				type:String,
				default:""
			},
			loginBackgroundNight:{
				type:String,
				default:""
			},
			loginTitle:{
				type:String,
				default:""
			},
			loginTips:{
				type:String,
				default:""
			}
		},
		data() {
			return {
				showLogin:this.showLoginModal
			}
		},
		watch: {
			_userinfo(newVal) {
				this.$emit("update:_userinfo", newVal);
			},
			showLoginModal(newVal) {
				this.showLogin = newVal;
			}
		},
		onLoad() {

		},
		methods: {
			closeModal() {
				this.showLogin = false;
				this.$emit("update:showLoginModal", false);
			},
			afterLogin(e){
				this.$emit("afterLogin",e);
			},
			fastLoginFn() {
					let that = this
					uni.login({
						provider: 'univerify',
						univerifyStyle: { // 自定义登录框样式
					    //参考`univerifyStyle 数据结构`
					  },
						success(res){ // 登录成功
							console.log('authResult',res.authResult);  // {openid:'登录授权唯一标识',access_token:'接口返回的 token'}
							uniCloud.callFunction({
								name: 'login', // 你的云函数名称
								data: {
									access_token: res.authResult.access_token, // 客户端一键登录接口返回的access_token
									openid: res.authResult.openid // 客户端一键登录接口返回的openid
								}
								}).then(dataRes => {
									that._userinfo = dataRes.result.data;
									that._userinfo.nickname=dataRes.result.data.phoneNumber.slice(7)
									uni.setStorageSync("userinfo", that._userinfo);
									uni.setStorageSync("token", res.authResult.access_token);
									that.showLogin = false;
									that.$emit("update:showLoginModal",false)
									that.afterLogin(that._userinfo);
									uni.showToast({
										title: "登陆成功",
										icon:"success"
									});
									console.log('云函数返回的参数3333', dataRes)
								}).catch(err => {
									console.log('云函数报错', err)
								})
								uni.showToast({
									title: res.authResult,
									icon: "none"
								})
							uni.closeAuthView() //关闭一键登录弹出窗口
						},
						fail(res){  // 登录失败
							console.log(res.errCode)
							console.log(res.errMsg)
						}
					})
			},
				
				
			mp_wx_get_userinfo() {
				let that = this;
				uni.showLoading({
					title:"登录中"
				})
				uni.getUserProfile({
					desc: 'login', // 这个参数是必须的
					success: res => {
						that._userinfo = res.userInfo;
						let pid = uni.getStorageSync("pid");
						if(!pid){
							pid = 0;
						}
						uni.login({
							success: x => {
								that.$httpApi.getUserInfo({
									code: x.code,
									pid: pid
								}).then(res => {
									uni.hideLoading()
									if (res.data.data.code == 200) {
										that._userinfo = res.data.data.data;
										uni.setStorageSync("userinfo", that._userinfo);
										uni.setStorageSync("token", res.data.data.token);
										that.showLogin = false;
										that.$emit("update:showLoginModal",false)
										that.afterLogin(that._userinfo);
										uni.showToast({
											title: "登陆成功",
											icon:"success"
										});
									} else {
										uni.showToast({
											title: "登陆失败",
											icon:'error'
										})
									}
								})
							}
						})
					},
					fail: err => {
						console.log(err)
					}
				})
			},

		}
	}
</script>

<style scoped lang="scss">
	.page-login {
		width: 100%;
		.login-block {
			margin-top: 30%;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			width: 100%;
			position:relative;
			.login-title {
				position:absolute;
				left:0;
				right:0;
				top:170px;
				font-size: 24px;
				font-weight: 900;
			}
			.login-tip {
				position:absolute;
				left:0;
				right:0;
				top:270px;
				font-size: 14px;
				font-weight: 900;
			}
			.operate-block {
				position:absolute;
				left:0;
				right:0;
				bottom: 1em;
				.login-btn {
					width: 200px;
					height: 50px;
					border-radius: 15px;
				}
			}
			
		}
	}
</style>
